<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <!--添加商品分类组件-->
        <el-col :span="4">
          <el-button type="primary" @click="showAddCategoryDialog"
            >添加分类</el-button
          >
        </el-col>
      </el-row>

      <tree-table
        class="treeTable"
        :data="categoryList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
      >
        <!-- 是否有序 -->
        <template v-slot:isok="scope">
          <i
            class="el-icon-success"
            style="color: lightgreen;"
            v-if="scope.row.cat_deleted == false"
          ></i>

          <i class="el-icon-error" style="color: red;" v-else></i>
        </template>

        <!-- 排序 -->
        <template v-slot:order="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag
            size="mini"
            type="success"
            v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>

        <!-- 操作 -->
        <template v-slot:opt="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </tree-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog
        title="添加商品分类"
        :visible.sync="addCategoryDialogVisible"
        width="50%"
         @close="addCateDialogClosed"
      >
        <el-form
          :model="addCategoryForm"
          :rules="addCategoryFormRules"
          ref="addCategoryFormRef"
          label-width="100px"
        >
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCategoryForm.cat_name"></el-input>
          </el-form-item>

          <el-form-item label="父级分类" prop="cat_pid">
            <el-cascader
              v-model="selectedKeys"
              :options="parentCateList"
              :props="cascaderProps"
              @change="parentCateChanged"
              change-on-select
              clearable
              filterable
              style="width: 100%"
            ></el-cascader>
          </el-form-item>
        </el-form>

        <!-- 添加用户提示框底部 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCategoryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getCategoryList();
  },

  data() {
    return {
      // 分类列表数据
      categoryList: [],

      // 分类父级列表数据
      parentCateList: [],

      //分页请求参数
      queryParams: {
        // 设置返回的的格式
        type: 3,
        pagenum: 1,
        pagesize: 5
      },

      // 指定级联选择器的配置对象
      cascaderProps: {
        // 配置触发选项 hover/click
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children"
      },

      // 选中的级联 Id 数组项
      selectedKeys: [],

      // 添加分类对话框
      addCategoryDialogVisible: false,

      // 添加分类表单
      addCategoryForm: {
        // 需要添加分类的名称
        cat_name: "",
        // 需要添加的分类的父Id,如果添加的是一级分类 pid设置成 0
        cat_pid: 0,
        // 需要添加分类的级别 1级分类 0 ，2级分类 1  3 级分类 2
        cat_level: 0
      },

      // 添加分类表单验证规则
      addCategoryFormRules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ]
      },

      // 总计返回条数
      total: 0,

      // 为 table 指定列的 属性
      columns: [
        {
          label: "分类名称",
          prop: "cat_name"
        },
        {
          // 指定这一列的名称
          label: "是否有效",

          // 表示将当前列设置成模板
          type: "template",

          // 表示这一列使用的模板名称
          template: "isok"
        },
        {
          // 指定这一列的名称
          label: "排序",

          // 表示将当前列设置成模板
          type: "template",

          // 表示这一列使用的模板名称
          template: "order"
        },
        {
          // 指定这一列的名称
          label: "操作",

          // 表示将当前列设置成模板
          type: "template",

          // 表示这一列使用的模板名称
          template: "opt"
        }
      ]
    };
  },

  methods: {

    // 添加分类对话框被关闭时触发的事件
    addCateDialogClosed(){
       
        // 清空对话框中选项的数据
        this.$refs.addCategoryFormRef.resetFields()
        this.selectedKeys = []
        this.addCategoryForm.cat_level = 0
        this.addCategoryForm.cat_pid = 0
    },

    // 添加分类对话框中的选项改变触发的事件
    parentCateChanged() {
      console.log(this.selectedKeys);

      if (this.selectedKeys.length > 0) {
        this.addCategoryForm.cat_pid = this.selectedKeys[
          this.selectedKeys.length - 1
        ];

        this.addCategoryForm.cat_level = this.selectedKeys.length;
      } else {
        this.addCategoryForm.cat_pid = 0
        this.addCategoryForm.cat_level = 0 
      }
    },

    // 显示添加分类对话框
    showAddCategoryDialog() {
      // 获取所有一级二级分类 Id
      this.getCategoryParent();

      this.addCategoryDialogVisible = true;
    },

    // 添加分类对话框关闭
    addCategoryDialogClosed() {},

    // 每页显示数据条数改变处理函数
    handleSizeChange(newSize) {
      this.queryParams.pagesize = newSize;
      this.getCategoryList();
    },

    // 当前页码发生改变触发函数
    handleCurrentChange(newNub) {
      this.queryParams.pagenum = newNub;
      this.getCategoryList();
    },

    // 获取商品数据分类
    async getCategoryList() {
      const { data: res } = await this.$http.get("categories", {
        params: this.queryParams
      });

      if (res.meta.status !== 200) {
        return this.$message.error("获取商品分类数据失败! ");
      }

      console.log(res);
      // 赋值商品数据列表的数据
      this.categoryList = res.data.result;
      // 赋值商品列表的总条数
      this.total = res.data.total;
    },

    // 获取商品分类的父级Id
    async getCategoryParent() {
      const { data: res } = await this.$http.get("categories", {
        params: {
          type: 2
        }
      });

      if (res.meta.status !== 200) {
        return this.$message.error("获取父级分类失败");
      }

      this.parentCateList = res.data;
      console.log(res.data);
    },

    // 添加商品分类具体业务逻辑
    addCategory() {
      console.log(this.addCategoryForm)
      this.$refs.addCategoryFormRef.validate(async valid=>{
        
        if (!valid){
          return
        }
        const { data: res} = await this.$http.post('categories',this.addCategoryForm)

        if (res.meta.status !== 201)
        {
          return this.$message.error('添加分类信息失败！')
        }

        this.$message.success('添加分类信息成功!')
        this.getCategoryList()
        this.addCategoryDialogVisible = false


      })
    }
  }
};
</script>

<style lang="less" scope>
.treeTable {
  margin-top: 15px;
}
</style>
